<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>购物车页面</title>

    <link href="/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="/basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="/css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="/css/optstyle.css" rel="stylesheet" type="text/css"/>
    <link type="text/css" href="/css/hmstyle.css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script src="/js/common.js" type="text/javascript"></script>
<!--    <script type="text/javascript" src="/js/jquery.js"></script>-->


</head>

<body>

<!--<th:block th:include="header"/>   搜索框和结算按钮冲突-->
<th:block th:include="header"/>
<!--购物车 -->
<div class="concent">
    <div id="cartTable">
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-chk">
                    <div id="J_SelectAll1" class="select-all J_SelectAll">

                    </div>
                </div>
                <div class="th th-item">
                    <div class="td-inner">商品信息</div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">单价</div>
                </div>
                <div class="th th-amount">
                    <div class="td-inner">数量</div>
                </div>
                <div class="th th-sum">
                    <div class="td-inner">金额</div>
                </div>
                <div class="th th-op">
                    <div class="td-inner">操作</div>
                </div>
            </div>
        </div>
        <div class="clear"></div>

        <tr class="item-list">
            <div class="bundle  bundle-last ">
                <div class="bundle-hd">
                    <div class="bd-promos">
                        <span class="list-change theme-login">编辑</span>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="bundle-main" th:each="p:${product}">
                    <ul class="item-content clearfix">
                        <li class="td td-chk">
                            <div class="cart-checkbox ">
                                <input class="check" th:pid="${p.id}" name="items[]" value="170037950254" type="checkbox">
                            </div>
                        </li>
                        <li class="td td-item">
                            <div class="item-pic">
                                <a target="_blank"
                                   class="J_MakePoint" data-point="tbcart.8.12">
                                    <img th:src="${p.imgPath}" class="itempic J_ItemImg"></a>
                            </div>
                            <div class="item-info">
                                <div class="item-basic-info">
                                    <a href="#" target="_blank"
                                       class="item-title J_MakePoint" data-point="tbcart.8.11">[[${p.title}]]</a>
                                </div>
                            </div>
                        </li>
                        <li class="td td-info">
                            <div class="item-props item-props-can">
                                <span class="sku-line">口味：[[${p.taste}]]</span>
                                <span class="sku-line">包装：[[${p.packages}]]</span>

                                <i class="theme-login am-icon-sort-desc"></i>
                            </div>
                        </li>
                        <li class="td td-price">
                            <div class="item-price price-promo-promo">
                                <div class="price-content">

                                    <div class="price-line">
                                        <em class="J_Price price-now" tabindex="0">[[${p.price}]]</em>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-amount">
                            <div class="amount-wrapper ">
                                <div class="item-amount ">
                                    <div class="sl">
                                        <input class="min am-btn"  type="button" value="-" th:pid="${p.id}"/>
                                        <input class="text_box" name="" type="text" th:value="${p.amount}"
                                               style="width:30px;"/>
                                        <input class="add am-btn"  type="button" value="+" th:pid="${p.id}"/>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-sum">
                            <div class="td-inner">
                                <em tabindex="0" class="J_ItemSum number">[[${p.totalPrice}]]</em>
                            </div>
                        </li>
                        <li class="td td-op">
                            <div class="td-inner">
                                <a title="移入收藏夹" class="btn-fav" href="#">移入收藏夹</a>
                                <a href="javascript:;" data-point-url="#" class="delete"><button class="del" th:pid="${p.id}">删除</button></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </tr>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>

    <div class="float-bar-wrapper">
        <div id="J_SelectAll2" class="select-all J_SelectAll">
            <div class="cart-checkbox" >
                <input class="check-all check" th:each="p:${product}" th:pid="${p.id}" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
                <label for="J_SelectAllCbx2"></label>
            </div>
            <span>全选</span>
        </div>
        <div class="operations">
            <a href="" hidefocus="true" class="deleteAll">删除</a>
            <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
        </div>
        <div class="float-bar-right">
            <form id="form1" action="/pay" method="post">
                <input type="hidden" id="ids" name="ids"/>
            <div class="amount-sum">
                <span class="txt">已选商品</span>
                <em id="J_SelectedItemsCount"></em><span class="txt">件</span>
                <div class="arrow-box">
                    <span class="selected-items-arrow"></span>
                    <span class="arrow"></span>
                </div>
            </div>
            <div class="price-sum">
                <span class="txt">合计:</span>
                <strong class="price">¥<em id="J_Total"></em></strong>
            </div>

            <div class="btn-area layui-btn-container">

               <button id="payBtn" type="button" class="layui-btn layui-bg-red" style="background-color: #FF4400">结&nbsp;算</button>
            </div>
            </form>
        </div>

    </div>
</div>

<th:block th:include="footer"/>

<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.7.0.js"></script>
<script>
    //页面元素加载完之后 初始化操作

    $.each($(".text_box"),function(index,item){
        var input = $(item);//遍历当前这一次的看的哪个框
        if(parseInt(input.val())===1){
            input.prev().attr("disabled",true);
        }
        if(parseInt(input.val())===10){
            input.next().attr("disabled",true)
        }
    });

    //加号
    $(".add").on("click",function(){
        var pid =this.getAttribute("pid")
        $.post("/cart/addOne",{pId:pid},function (){

        });

        var _this = $(this);
        _this.prev().prev().attr("disabled",false);//取消-禁用
        var input = _this.prev();//文本框
        //数量加一
        input.val(parseInt(input.val())+1);
        //小计修改
        var price = _this.parents(".td-amount").prev().find(".price-now").html();
        var total2 = (parseFloat(price)*parseInt(input.val())).toFixed(2);
        _this.parents(".td-amount").next().find(".number").html(total2)
        //如果数量已经是10，禁用这个
        if(parseInt(input.val())===10){
            _this.attr("disabled",true);
        }
        count();
    });
    //减号
    $(".min").on("click",function(){
        var pid =this.getAttribute("pid")
        $.post("/cart/reduceOne",{pId:pid},function (){

        });
        var _this = $(this);
        _this.next().next().attr("disabled",false);//取消+禁用
        var input = _this.next();
        input.val(parseInt(input.val())-1);
        var price = _this.parents(".td-amount").prev().find(".price-now").html();
        console.log(price)
        var total1 = (parseFloat(price)*parseInt(input.val())).toFixed(2);
        console.log(total1)
         _this.parents(".td-amount").next().find(".J_ItemSum").html(total1);

        if(parseInt(input.val())===1){
            _this.attr("disabled",true);
        }
        count();
    });

    $(".del").on("click",function(){
       var pid =this.getAttribute("pid")
        $.post("/cart/deleteOne",{pId:pid},function (){

        });

        var _this=$(this);//当前点的删除按钮
        var b = confirm("您确定删除这个商品吗？");
        if(b){//点了确定 删除tr
            _this.parents(".item-content").remove();
        }
        count();
    });


    //统计
    var count = function(){
        var sum2 =0;//选中件数
        var sum3 =0;//选中总价格
        $.each($(".text_box"),function(index,item){
            var chk = $(item).parents(".item-content").find(".check");
            console.log(chk)
            //如果打沟了 就加
            if(chk.prop("checked")){
                sum2 += parseFloat($(item).val());
                console.log(sum2);
                sum3 +=parseFloat($(item).parents(".td").next().find("em").html());
                console.log(sum3);
            }
        });
        $("#J_SelectedItemsCount").html(sum2);
        $("#J_Total").html(sum3);
    };
    //全打勾了就把全选的沟打上
    $(".check").on("click",function(){
        count();
        //如果点完的按钮的和本来设置的按钮数量一致 就吧全选的勾打上
        $("#J_SelectAllCbx2").prop("checked",$(".check").length===$(".check:checked").length);

    });
    //点击全选  把所有单选勾选上
    $("#J_SelectAllCbx2").on("click",function(){
        //点了全选的勾 就把所有单选的勾的状态变成checked
        $(".check").prop("checked",$(this).prop("checked"));
        count();
    });
</script>

<script src="/layui/layui.js"></script>
<script>
    layui.use(["layer",'util'],function (){
        var $ = layui.jquery;
        layer = layui.layer;
        util = layui.util;

        var getCartIds = function (){
            var ids="";
          $.each($(".check:checked"),function (index,item){
                if(ids){
                    ids+=",";
                }
                ids+=$(item).attr("pid");
          });
          $("#ids").val(ids);
        };
        $("input[type=checkbox]").on("click",function (){
            getCartIds();
        });

        $("#payBtn").on("click",function (){
            if ($("#ids").val()){
                $("#form1").submit();
            }else{
                layer.msg("请至少选择一个商品")
            }
        });
    });

</script>
</body>

</html>